<template>
  <nav
    ref="navRef"
    class="no-scrollbar"
    :style="{ margin: noGap ? '0' : '' }"
    v-if="data"
    :class="[
      bgWhite ? 'bg-white' : '',
      gapTop ? 'gap-top' : '',
      hiddenSplit ? 'hidden-split' : '',
    ]"
  >
    <ul>
      <li class="slide-block"></li>
      <li
        v-for="(item, index) in data"
        :key="index"
        :class="[currentIndex == index ? 'active' : '']"
        @click="onClickNavItem(item, index)"
      >
        {{ $t(item.title || item.label) }}
      </li>
    </ul>
  </nav>
</template>

<script setup lang="ts">
import {
  computed,
  nextTick,
  onBeforeUnmount,
  onMounted,
  ref,
  watch,
} from "vue";

type Props = {
  // 导航项
  data: any[];
  // 是否启用滑块过渡效果
  transition?: boolean;
  // 当前选项索引
  activeIndex: number;
  noGap?: boolean;
  bgWhite?: boolean;
  hiddenSplit?: boolean;
  activeColor?: string;
  gapTop?: boolean;
};

const currentIndex = ref(0);

const props = withDefaults(defineProps<Props>(), {
  transition: true,
  activeIndex: 0,
});

const emits = defineEmits(["click-navbar"]);

const onClickNavItem = (item: any, index: number) => {
  if (currentIndex.value == index) return;
  currentIndex.value = index;
  emits("click-navbar", { item, index });
  // 重置slide-block位置
  initSlideBlock();
};

const navRef = ref<HTMLElement | undefined>();
const initSlideBlock = () => {
  if (!navRef.value) return;
  nextTick(() => {
    setTimeout(() => {
      const slideBlock = navRef.value?.querySelector(
        ".slide-block"
      ) as HTMLElement;
      if (!slideBlock) return;
      const activeNavItem = navRef.value?.querySelector(
        "li.active"
      ) as HTMLElement;
      slideBlock.style.width = activeNavItem.offsetWidth + "px";
      slideBlock.style.transform = `translateX(${activeNavItem.offsetLeft}px)`;
      slideBlock.style.transition = props.transition ? "all 0.3s" : "none";
    });
  });
};
watch(
  () => props.data,
  () => {
    if (props.data && props.data.length > 0) {
      initSlideBlock();
    }
  }
);

watch(
  () => props.activeIndex,
  () => {
    currentIndex.value = props.activeIndex;
    initSlideBlock();
  },
  { immediate: true }
);

onMounted(() => {
  if (props.data && props.data.length > 0) {
    initSlideBlock();
    window.addEventListener("resize", initSlideBlock);
  }
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", initSlideBlock);
});

defineExpose({
  refresh: initSlideBlock,
});

// ===========computed
const activeColor = computed(() => props.activeColor || "rgb(54, 67, 77)");
</script>
<style scoped lang="less">
nav {
  &.hidden-split {
    ul {
      gap: 20px;
    }
    li:not(.slide-block) {
      padding: 0 8px 15px 8px;
      &:not(:last-child)::after {
        display: none;
      }
    }
  }
  &.gap-top {
    margin-top: 24px;
    @media screen and (max-width: 768px) {
      margin-top: 123px;
    }
  }
}
nav {
  margin-bottom: 24px;
  border-bottom: 1px solid #cdd6de;
  ul {
    position: relative;
    display: flex;
    font-size: 16px;
    gap: 32px;
    li.slide-block {
      position: absolute;
      height: 4px;
      background-color: v-bind(activeColor);
      bottom: 0;
      left: 0;
      transition: all 0.3s;
    }
    li:not(.slide-block) {
      padding: 0 16px 21px 16px;
      position: relative;
      cursor: pointer;
      &.active {
        font-weight: 600;
      }
      &:not(:last-child)::after {
        content: "";
        position: absolute;
        right: 0;
        top: 4px;
        width: 1px;
        height: 16px;
        right: -16px;
        background: v-bind(activeColor);
      }
    }
  }
}

@media screen and (max-width: 768px) {
  nav {
    margin-bottom: 123px;
    max-width: 100%;
    overflow-x: scroll;
    ul {
      font-size: 72px;
      white-space: nowrap;
      gap: 123px;
      li {
        text-align: center;
      }
      li.slide-block {
        height: 8px;
      }
      li:not(.slide-block) {
        padding: 64px!important;
        position: relative;
        cursor: pointer;
        &.active {
          font-weight: 600;
        }
        &:not(:last-child)::after {
          content: "";
          position: absolute;
          right: 0;
          top: 50%;
          width: 1px;
          height: 50%;
          right: calc(-123px / 2);
          transform: translate(-50%, -50%);
          background: #cdd6de;
        }
      }
    }
  }
}
</style>
